WebXR documentación

Introducción

WebXR Device API ofrece acceso a los datos de entrada del dispositivo en uso (headset, controles, camara, posición), hardware asociado a la realidad virtual y realidad aumentada.

¡WebXR NO crea experiencias 3D!

Aunque WebXR es una API que es relacionada a proyectos VR y AR no se encarga de los elementos 3D. Esta es una API que recupera información necesaria del dispositivo del usuario, información que se comparte con elementos de Three.js como con un elemento PerspectiveCamera.

Soporte (12/11/2024)

A la fecha de creación de esta investigación, WebXR no es soportada en Safari para dispositivos móviles. Para lentes de realidad virtual, WebXR se debe de activar como funcionalidad de prueba.

Alternativa a Safari en dispositivos móviles

Para utilizar WebXR en dispositivos Apple, se puede emplear WebXR Viewer, un navegador que ofrece soporte completo para esta API.

Proyectos

• Bruno Simons

[]

Ejemplo

El siguiente ejemplo fue realizado siguiendo los pasos de Crea una sesión de RA envolvente con WebXR, proyecto ejemplo que usa google para explicar esta API.

1. Verificar que el navegador soporte WebXR

Sí navigator.xr es una propiedad existente significa que el navegador que el usuario esta usando soporta el uno de WebXR.

Nota: Usando Threej.js la propiedad xr se obtiene de renderer.xr

isSessionSupported es una función asincrona la cual verifica que el tipo de experiencia deseada es compatible con el dispositivo del usuario. Retorna un boleano para verificar la compatibilidad.

await navigator.xr.isSessionSupported("immersive-ar")

Existen 3 tipos de sesiones:

• inmmersive-ar. Experiencias AR en las cuales se requiere de una cámara para poder desplegar el contenido de la aplicación.

• inmmersive-vr. Experiencias VR que requieren el uso de lentes de realidad virtual. Este tipo de proyectos usualmente usan controles, joysticks o hardware especializado.

• inline. Experiencas VR con la que se interactua desde la pantalla de una computadora o dispositivo móvil.

2. Solicitar sesión

Una vez que se haya asegurado la compatibilidad del navegador se debe solicitar el tipo de sesión que se va a utilizar durante la experiencia. Solo se permite una sesión a la vez.

Dentro de la solicitud de sesión se pueden agregar opciones (entre las más imporantes estan las características requeridas por la experiencia). La opción seleccionada hit-test define el uso de un un rayo análogo a un RayCaster que existe en Three.js. La otra opción menciona el contexto sobre el cual se renderizarán los elementos 3D.

3. Crear el contexto WebGL

Nota: Usando Threej.js el renderizador ya comparte el contexto entre WebXR y Three.js

4. Crear referencia de espacios

WebXR puede manejar diferentes entradas y posiciones como podría ser el headset, joysticks, etc. Por lo tanto tener una referencia de espacio debe ser importante al momento de crear una aplicación usando esta API.

Existen diferentes tipos de referencia, enter los más conocidos estan los siguientes:

• local. El entorno cercano del usuario. No se espera que el usuario se mueva demasiado desde su punto inicial.

• viewer. Obtener la referiencia de la ortientación de la vista del usuario.

• unbounded. Sin līmite. Permite que el usuario se desplace libremente en su entorno.

De esta manera, la solicitud de esta referencia define que será cerca del punto inicial.

this.localReferenceSpace = await this.xrSession.requestReferenceSpace("local");

En este caso se solicita la referencia a la orientación del usuario, información que es útil para actualizar la orientación de nuestra cámara.

this.viewerSpace = await this.xrSession.requestReferenceSpace("viewer");

Por último, se obtiene el resultado de un rayo proveniente de la posición del dispositivo.

this.hitTestSource = await this.xrSession.requestHitTestSource({space: this.viewerSpace});

5. Definir la escena Three.js

6. Actualizar las posiciones en el 3D

Esta es la parte más importante del código ya que aquī se realiza la combinación entre los valores proporcionados por WebXR y el renderizado de la escena del entorno 3D.

Vamos a ir definiendo las lineas más importantes de esta función.

Para empezar onXRFrame es una función callback del renderizado. Esta función tiene 2 parámetros importantes para el renderizado 3D. El primero es time que es el tiempo que ha pasado desde el último renderizado. El segundo parámetro es frame. Frame contiene información acerca del renderizado que se esta ejecutando.

Frame permite obtener la vista del usuario: const hitTestResults = frame.getHitTestResults(this.hitTestSource);

El resultado de la vista en entornos AR solo tiene un elemnto, la camara del dispositivo. En entornos VR y usando un headset, el resultado tiene 2 elementos, las dós camara (una por ojo). const hitPose = hitTestResults[0].getPose(this.localReferenceSpace); Con la vista de la camra podemos obtener la orientación hacia el entorno local getPose(this.localReferenceSpace);`

Con el elemento hitPose tenemos la información de la posición con el suelo del entorno real, por lo que podemos actualizar valores de posicionamiento. En este caso se actualiza un apuntador del entorno 3D.

Después de haber realizado la actualización con la información de WebXR se manda a actualizar la escena.

this.xrSession.requestAnimationFrame(this.onXRFrame); Bind the graphics framebuffer to the baseLayer's framebuffer. const framebuffer = this.xrSession.renderState.baseLayer.framebuffer; this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, framebuffer); this.renderer.setFramebuffer(framebuffer); const viewport = this.xrSession.renderState.baseLayer.getViewport(view); // Actualizar la vista 3D this.renderer.setSize(viewport.width, viewport.height); this.renderer.render(this.scene, this.camera);